<template>
  <div>
    <h1>父组件</h1>
    <!-- 分模块的state用法  $store.state.分模块名.属性 -->
    <h1>分模块的state属性渲染：{{$store.state.cartStore.myname}}</h1>
    <!-- 分模块的getters用法  $store.getters['分模块名/属性'] -->
    <h1>{{$store.getters["cartStore/mylist"]}}</h1>
    <h1 v-for="item in $store.getters['cartStore/mylist']" :key="item">
        {{item}}
    </h1> 
    <button @click="fmuta">触发分模块mutations</button>
     <button @click="factions">触发分模块actions方法</button>
    <hr>
    <vuex-sun ></vuex-sun>
  </div>
</template>

<script>
import vuexSun from './vuexSun'
export default {
  name: '2209vueVuexOne',
  components:{vuexSun},
  data() {
    return {
      
    };
  },
  created(){
    console.log(this.$store,"-----")
  },
  mounted() {
    
  },

  methods: {
    fmuta(){
      // 触发分模块的 mutations
      //  this.$store.commit("分模块名/方法名","参数");
      this.$store.commit("cartStore/setName","毛泽东");

    },
    factions(){
      // 触发分模块的actions方法  
      //   this.$store.dispatch("分模块名/方法名","参数")
       this.$store.dispatch("cartStore/nameAct","邓小平");

    }
  },
};
</script>